<template>
    <div style="width: 100%;height: 100vh;color:var(--color-neutral-10);margin: 0 auto">
      <div style="padding: 40px 0 0 0;margin: 0 auto;max-width: 1550px;width: 90%;">
        <p style="font-size: 24px;font-weight: bold;margin-bottom: 10px">系统设置</p>
      </div>
      <div style="width: 100%;height: calc(100% - 96px);position: relative;overflow-y: auto;padding-bottom: 60px;">
        <div style="width: 90%;height: 100%;margin: 0 auto;max-width: 1550px;padding-top: 20px;">
            <p style="margin-bottom: 10px;">系统设置列表</p>
            <div v-for="item in data.settings" class="item" @click="getSetting(item.keyName)">
                {{ item.keyName }}
            </div>
        </div>
      </div>
      <a-modal v-if="data.currentSetting!=undefined" v-model:visible="data.showEditSettingForm" @ok="change" :closable="data.isSaving==false" :mask-closable="data.isSaving==false" :ok-loading="data.isSaving">
          <template #title>
            编辑{{ data.currentSetting.keyName }}
          </template>
          <div style="max-height: calc(80vh - 48px - 65px);overflow-y: scroll;">
            <p>value</p>
            <input :disabled="isSettingBan(data.currentSetting.keyName)==true" v-model="data.currentSetting.value" style="line-height: 45px;border: 0;width: 100%;display: inline-block;background-color: var(--color-neutral-2);border-radius: 5px;padding: 0 5px;">
            <p>explain</p>
            <input :disabled="isSettingBan(data.currentSetting.keyName)==true" v-model="data.currentSetting.explain" style="line-height: 45px;border: 0;width: 100%;display: inline-block;background-color: var(--color-neutral-2);border-radius: 5px;padding: 0 5px;">
            <p v-if="isSettingBan(this.data.currentSetting.keyName)==true" style="color: red;">此设置的值由系统决定，管理员不可直接修改。</p>
            <v-btn v-if="isSettingBan(data.currentSetting.keyName)==false">删除</v-btn>
          </div>
        </a-modal>
    </div>
  </template>
  
  <script>
  import tool from '@/utlis/tool'
  import config from '@/config'
  import dataEditor from "@/components/dataEditor.vue";
  import axios from "axios";
  
  export default {
    components:{
      dataEditor
    },
    name: '',
    data() {
      return {
        data:{
          settings:[],
          showEditSettingForm:false,
          isSaving:false,
          currentSetting:undefined,
          banSettings:[]
        }
      }
    },
  
    methods: {
        isSettingBan(name){
            for(let i=0;i<this.data.banSettings.length;i++){
                if(this.data.banSettings[i]==name){
                    return true
                }
            }
            return false
        },
        async deleteSetting(){
            this.data.isSaving = true
            await tool.axiosPostWithCheckStatus(config.serverURL,'/setting/delete',{
                keyName:this.data.currentSetting.keyName
            })
            this.data.isSaving = false
            this.data.showEditSettingForm = false
            this.getSettings()
        },
        async getSetting(name){
            let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/setting/get',{
                keyName:name
            })
            this.data.showEditSettingForm = true
            this.data.currentSetting = re.results
            console.log(re)
        },
        async change(){
            if(this.isSettingBan(this.data.currentSetting.keyName)==true){
                this.data.showEditSettingForm = false
                return
            }
            this.data.isSaving = true
            await tool.axiosPostWithCheckStatus(config.serverURL,'/setting/change',{
                token:this.bgData.loginedAdminInfo.token,
                keyName:this.data.currentSetting.keyName,
                value:this.data.currentSetting.value,
                explain:this.data.currentSetting.explain,
            })
            this.data.isSaving = false
            this.data.showEditSettingForm = false
            this.getSettings()
        },
        async getSettings(){
            let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/bg/setting/list',{
                token:this.bgData.loginedAdminInfo.token
            })
            this.data.settings = re.results.list
            this.data.banSettings = re.results.banList
            console.log(re)
        }
    },
  
    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    mounted() {
        this.getSettings()
    },
  
    props: {
      appData:undefined,
      bgData:undefined
    },
  
    //监听属性 类似于data概念",
    computed: {},
  
    //监控data中的数据变化",
    watch: {},
  
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
    },
  
    //生命周期 - 挂载之前",html模板未渲染
    beforeMount() {
    },
  
    //生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {
    },
  
    // 生命周期 - 销毁之前调用
    beforeDestroy() {
    },
  
    //生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {
    },
  
    //生命周期 - 销毁完成"
    destroyed() {
    },
  
    //如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {
    }
  }
  </script>
  
  <style scoped>

  .item{
      padding: 20px 20px;
      width: 100%;
      max-width: 600px;
  }

  .item:hover{
      background-color: var(--color-neutral-3);
  }

  .item:active{
      background-color: var(--color-neutral-2);
  }
  
  </style>